<template>
	<view>
		<view class="content">
			<view class="header">
				<image :src="ImageUrl + '/1/logo.png'" />
			</view>
			<view class="input">
				<view class="text">
					手机号
				</view>
				<input type="number" v-model="phone" placeholder-style="color:#C1C1C1" placeholder="请输入手机号">
				<view class="null"></view>
			</view>
			<view class="input">
				<view class="text">
					验证码
				</view>
				<input style="width: 40%;" v-model="code" type="number" placeholder-style="color:#C1C1C1"
					placeholder="输入验证码" />
				<view class="right">
					<view class="code" v-if="codeShow" @tap="handleClickCode">
						发送验证码
					</view>
					<view class="code retry" v-else>
						{{count}}秒后重试
					</view>
				</view>
			</view>
			<view class="tips">
				未注册账号登陆将自动为您创建平台账号
			</view>
			<view class="login-btn" @click="phoneLogin">
				登录
			</view>
			<view class="treaty">
				<view @click="checked = !checked" class="items-center">
					<view class="icon">
						<image class="image-block" v-if="!checked" src="../../static/img/chenggogn-2@2x.png" mode="">
						</image>
						<image class="image-block" v-else src="../../static/img/chenggog.png" mode=""></image>
					</view>
					<text>登录注册即表示同意</text>
				</view>
				<view class="text">
					<navigator url="/pages/public/fuwenben?type=5&name=用户协议">用户协议、</navigator>
					<navigator url="/pages/public/fuwenben?type=7&name=隐私政策">隐私政策</navigator>
				</view>
			</view>
			<view class="wx" @click="handleWx">
				<image class="icon" src="../../static/img/wxdl.png" mode=""></image>
				<view class="text">
					微信登陆
				</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>

	var md5 = require('../../common/js/md5.js')
	export default {
		data() {
			return {
				show: true,
				isLoading:false,
				codeShow: true,
				count: "",
				timer: null,
				checked:false,
				phone:'',
				code:''
			};
		},
		onLoad() {

		},
		methods: {
			handleClickCode() {
				if (!this.phone) return this.$util.msg('手机号不能为空')
				if (!this.$util.checkStr(this.phone,'mobile')) return this.$util.msg('请输入正确的手机号!')
				this.getCodeFn(this.phone)
			},
			handleWx(){
				var _this = this
				uni.login({
					provider:'weixin',
					success(e) {
						uni.getUserInfo({
							provider:'weixin',
							success(re) {
								let parmas = {
									thirdId: re.userInfo.unionId,
									type: 1,
								};
								_this.wxLoginFn(parmas)
							}
						})
					}
				})
			},
			async wxLoginFn(e){
				const res = await this.$request('user/thirdLogin',e,{showLoading:true})
				if(res.result == '0'){
					if(res.data.isBindPhone == '0'){
						this.navTo('./set-phone?thirdId=' + e.thirdId)
					}else{
						uni.setStorageSync('uid',res.data.uid)
						this.getUserInfo()
						this.switchTab('/pages/tabs/home')
						setTimeout(()=>{
							this.$util.msg('登录成功');
						},1000)
					}
				}else{
					this.$util.msg(res.resultNote)
				}
			},
			async phoneLogin(){
				if(!this.checked) return this.$util.msg('请先同意以下协议')
				if(!this.phone) return this.$util.msg('手机号不能为空')
				if(!this.code) return this.$util.msg('验证码不能为空')
				const res = await this.$request('user/code-login',{
					phone:this.phone,
					code:this.code
				},{showLoading:true})
				if(res.result == '0'){
					uni.setStorageSync('uid',res.data.uid)
					this.switchTab('/pages/tabs/home')
					this.getUserInfo()
					setTimeout(()=>{
						this.$util.msg('登录成功');
					},1000)
				}else{
					this.$util.msg(res.resultNote)
				}
			},
			async getCodeFn(phone) {
				
				var timestamp = new Date().getTime()
				var sign = md5.hexMD5(timestamp + 'lixinkeji')
				const res = await this.$request('user/sendSms',{
					phone,
					sign,
					timestamp
				},{showLoading:true})
				console.log(res);
				if (res.result == '0') {
					this.$util.msg('获取成功')
					console.log(res);
					const TIME_COUNT = 60;
					if (!this.timer) {
						this.count = TIME_COUNT;
						this.codeShow = false;
						this.timer = setInterval(() => {
							if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--;
							} else {
								this.codeShow = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000);
					}
				}else{
					this.$util.msg(res.resultNote)
				}
			},
		},
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>

	.header {
		margin: 60px auto;
		text-align: center;
	}

	.hide {
		opacity: 0;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.bottom {
		height: 80upx;
		width: 400upx;
		background: #246697 !important;
		border-radius: 12upx;
		margin: 70upx auto;
		font-size: 30upx;
		color: #ffffff;
	}

	.content {
		padding: 20rpx 45rpx;

		.input {
			width: 660rpx;
			height: 110rpx;
			background: #FFFFFF;
			border: 1rpx solid #E5E7EB;
			border-radius: 55rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 36rpx 44rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;
			font-size: 30rpx;
			color: #101010;

			.text {
				font-weight: bold;
			}

			input {
				width: 60%;
			}

			.null {
				width: 35rpx;
				height: 0;
			}

			.right {
				width: 30%;
				font-size: 30rpx;
				font-weight: bold;
				color: #101010;
			}
		}
		.tips{
			text-align: center;
			margin: 0 0 20rpx 0;
			font-size: 30rpx;
			color: #9a9898;
		}
		.treaty {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.icon {
				width: 30rpx;
				height: 26rpx;
				margin-right: 30rpx;
				.image-block{
					width: 100%;
					height: 100%;
				}
			}

			.text {
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				color: #4e9fc1;

				.navigator-hover {
					background-color: transparent;
				}
			}

		}

		.help {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 500;
			color: #101010;
			margin-top: 41rpx;

			.left {
				display: flex;
				align-items: center;

				.navigator-hover {
					background-color: transparent;
				}
			}
		}

		.login-btn {
			width: 660rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 110rpx;
			text-align: center;
			margin-top: 43rpx;
		}
		.wx{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 70rpx;
			.icon{
				width: 50rpx;
				height: 50rpx;
			}
			.text{
				font-size: 30rpx;
				font-weight: bold;
				color: #101010;
				margin-top: 20rpx;
			}
		}
	}
</style>